<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>{$basic.title}</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
	<link href="__LAYUI__/css/layui.css" rel="stylesheet">
    <link href="__LAYUI__/css/ah.css" rel="stylesheet">
	<style>
		#tree-table th{
			height: 38px;
		}
	</style>
</head>
<body>
<div class="wrapper-content">
<div class="ibox">
	<div class="ibox-title"><h3>文章分类</h3>
	<div class="ibox-tools">
					<div class="layui-btn-group" id="amTools">
						{:getTool(['re','add','del'],$toolUrl)}
					  </div>            
		</div>
	</div>
	<div class="ibox-content">
	<table class="layui-table layui-form" id="tree-table" lay-size="sm">
</div>
</div>
</div>
</body>
      
<script src="__LAYUI__/layui.js"></script>
		<script type="text/javascript">
layui.config({
	base: '__LAYUI__/exts/',
}).extend({
	treeTable: 'treeTable',
});
			layui.use(['treeTable','layer','form'],function(){
				var $ = layui.jquery,
					form = layui.form,
					layer = layui.layer,
					treeTable = layui.treeTable;
				var xaoam={
					tool:function(){
						$('#amTools [type="button"]').on('click',function(ele){
										  	let url = $(this).data('url');
											if($(this).hasClass('am_re')){
												xaoam.init();
											}
											if($(this).hasClass('am_add')){
												xaoam.newWin(url,'');
											}
											if($(this).hasClass('am_dels')){
											  let data = table.checkStatus('tabData').data;
											  let ids = [];
												console.log(data);
													if(data.length == 0){
														layer.msg('选点什么吧!');
													}else{
													$.each(data,function(k,row){
																ids.push(row.id);
															});
														$.ajax({
															url:url,
															data:{'id':ids},
															type:'POST',
															dataType:'JSON',
															success:function(res){
																layer.msg(res.msg);
																if(res.code == 200){
																	table.reload('tabData');
																}
															}
														})
														}
													}
						});
					},
					newWin:function(url,text){
								 var index = layer.open({ type: 2,
								  				  title: [text, 'font-size:18px;'],
								  				  content: url,
								  				});
								  		layer.full(index);
					},
				  del:function(url,obj){
								  $.get(url,{'id':obj.id},function(res){
									 if(res.code == 200){
										xaoam.init();
										}
									layer.msg(res.msg);
								  });

				  },
				  cue:function(data){
						$.ajax({
							url:"{:url('cate/cue')}",
							data:{'id':data.id,'field':data.field,'value':data.value},
							type:'post',
							dataType:'json',
							success:function(res){
								layer.msg(res.msg);
							}
						})		  
				  },
				  init:function(){
					  treeTable.render({
					  	elem: '#tree-table',
					  	url:'{:url("cate/lists")}',
					  	icon_key: 'name',
					  		primary_key: 'id',
					  		parent_key: 'parentId',
					  	is_checkbox: true,
					  	checked: {
					  		key: 'id',
					  		
					  	},
					  	end: function(e){
							if(e.data.length > 0){
								form.render();
							}else{
								layer.msg('什么也没有哦');
							}
					  	},
					  	cols: [
					  		{
					  			key: 'id',
					  			title: 'ID',
					  			width: '50px',
					  			align: 'center',
					  		},
					  		{
					  			key: 'name',
					  			title: '名称',
					  			width: '200px',
					  		},
					  		{
								key:'status',
					  			title: '状态',
					  			width: '80px',
					  			align: 'center',
					  		},
							{	title:'地址',
								align:'center',
								template:function(item){
										return '<input type="text" value="'+item.url+'" class="layui-input layui-disabled">';
								}
							},
					  		{
					  			title: '操作',
					  			align: 'center',
								key:'opts'
					  		}
					  	]
					  });
				  }
				}
				// 监听checkbox选择
				$(document).on('click','.layui-form-switch',function(){
					let ele = $(this).prev('[name="status"]');
						id	= ele.attr('data-aid');
						value = ele.is(':checked')?1:0;
					let d = {'id':id,'field':'status','value':value};
					xaoam.cue(d);
					
				})
				treeTable.on('tree(edit)',function(){
					let url = $(this).data('url');
					xaoam.newWin(url,'');
				})
				treeTable.on('tree(del)',function(data){
					let url = $(this).data('url');
					let d = {'obj':$(this).parent('tr'),'id':data.item['id']};
					xaoam.del(url,d);
				})
		xaoam.init();
		xaoam.tool();
		window.Wxaoam = xaoam;
			});

		</script>
</body>
</html>